<template>
  <div class="container">
    <!-- 上方搜索框 -->
    <div class="above">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input v-model="real_name" placeholder="请你输入姓名" clearable />
        </el-form-item>
        <el-form-item label="工号">
          <el-input v-model="faculty_number" placeholder="请你输入学号" clearable />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="phone" placeholder="请你输入手机号" clearable />
        </el-form-item>
        <el-form-item label="状态" align="center">
          <el-select v-model="is_active" placeholder="请选择状态" clearable size="large" style="width: 200px; height: 30px;">
            <el-option label="激活" value="true" />
            <el-option label="未激活" value="false" />
          </el-select>
        </el-form-item>
        <el-form-item label="学校">
          <el-select v-model="school_name" placeholder="请选择学校" clearable size="large" style="width: 200px; height: 30px;">
            <el-option :key="index" :label="item.school_name" :value="item.id" v-for="(item, index) in schoolList" />
          </el-select>
        </el-form-item>
        <el-form-item label="学院">
          <el-select v-model="academy" placeholder="请选择学院" clearable size="large" style="width: 200px; height: 30px;">
            <el-option :key="index" :label="item.school_name" :value="item.id" v-for="(item, index) in schoolList" />
          </el-select>
        </el-form-item>
        <el-button type="primary" size="large" round @click="reset()">重置</el-button>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="below">
      <el-table :data="filterTeacherList" style="width: 100%" class="my-table">
        <el-table-column prop="faculty_number" label="工号" width="150" align="center" />
        <el-table-column prop="user.real_name" label="姓名" width="150" align="center" />
        <el-table-column prop="user.phone" label="手机" width="150" align="center" />
        <el-table-column prop="school.school_name" label="学校" width="150" align="center" />
        <el-table-column prop="academy" label="学院" width="150" align="center" />
        <el-table-column prop="user.is_active" label="状态" width="150" align="center">
          <template #default="scope">
            <el-switch v-model="scope.row.user.is_active" @change="updateState(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column prop="right" label="操作" width="230" align="center">
          <template #default="scope">
            <el-button type="success" size="small" round @click="editSchoolAdmin(scope.row)">查看</el-button>
            <el-button type="primary" size="small" round @click="editSchoolAdmin(scope.row)">修改</el-button>
            <el-button type="danger" size="small" round @click="resetpassword(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { mapActions, mapState } from 'vuex';
import { getTeacherList } from "@/api/userApi";
export default {
  created() {
    this.fetchschoolList();
    this.ListTeacher();
  },
  data() {
    return {
      // 教授list
      TeacherList: [],
      // 搜索框变量
      real_name: "",
      faculty_number: "",
      phone: "",
      is_active: "",
      school_name: "",
      academy: "",
      // 筛选后的教授列表
      filterTeacherList: [],
    }
  },
  computed: {
    ...mapState(["schoolList"]),
    filterTeacherList() {
      if (this.real_name === "" && this.faculty_number === "" && this.phone === ""
        && this.is_active === "" && this.school_name === "" && this.academy === "") {
        return this.TeacherList; // 如果没有提供过滤条件，直接返回原始列表
      }
      return this.TeacherList.filter((teacher) => {
        const nameMatch = this.real_name === "" || teacher.user.real_name.includes(this.real_name);
        const facultyNumber = this.faculty_number === "" || teacher.faculty_number.includes(this.faculty_number);
        const phone = this.phone === "" || teacher.user.phone.includes(this.phone);
        const isActive = this.is_active === "" || teacher.user.is_active === this.is_active;
        const schoolName = this.school_name === "" || teacher.school.id === this.school_name;
        const academy = this.academy === "" || teacher.academy === this.academy;
        return nameMatch && facultyNumber && phone && isActive && schoolName && academy;
      })
    },
  },
  methods: {
    ...mapActions(["fetchschoolList"]),
    // 获取教授list
    ListTeacher() {
      getTeacherList().then((res) => {
        this.TeacherList = res;
      })
    },
    reset() {
      this.real_name = "",
        this.faculty_number = "",
        this.phone = "",
        this.is_active = "",
        this.school_name = "",
        this.academy = ""
    },
  }
}
</script>
<style scoped>
.container {
  width: 100%;
  height: 100%;

  display: flex;
  flex-flow: column nowrap;
  /* 对称轴(左右居中) */
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
}

.above {
  margin-bottom: 10px;

  .el-input {
    width: 210px;
    /* 设置宽度 */
  }

  .below {
    height: 100%;
    width: 95%;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: flex-start;

    /* 样式表中定义表格的样式 */
    .my-table {
      height: 100%;
      width: 100%;
      border: 1.5px solid #949393;
      /* 设置表格边框颜色 */
    }
  }
}
</style>